<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      Deposit Statistics：
      <div class="contentBatterydiv">
        Entry Deposit：<span class="contentBatteryspan">{{
          "$" + totalList.sumMoney || "$0.00"
        }}</span>
      </div>
      <div class="contentBatterydiv">
        Return Deposit：<span class="contentBatteryspan">{{
          "$" + totalList.returnMoney || "$0.00"
        }}</span>
      </div>
    </div>
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        orderNo: "",
        phone: "",
        status: null,
        // returnStatus: null,
        payType: null
        // rentStatus: null,
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 240
        },
        { type: "input", placeholder: "Phone", prop: "phone", width: 180 },
        {
          type: "select",
          placeholder: "Payment Status",
          prop: "status",
          width: 260,
          options: [
            {
              label: "Wait Payment",
              value: 0
            },
            {
              label: "Already Payment",
              value: 1
            }
          ]
        },
        // {
        //   type: "select", placeholder: "DepositStatus", prop: "returnStatus", width: 150, options: [
        //     {
        //       label: "未退Deposit",
        //       value: 0,
        //     },
        //     {
        //       label: "已退Deposit",
        //       value: 1,
        //     },
        //   ],
        // },
        {
          type: "select",
          placeholder: "Payment Type",
          prop: "payType",
          width: 240,
          options: [
            {
              label: "WeChat",
              value: 0
            },
            {
              label: "Alipay",
              value: 1
            },
            {
              label: "Alipay Deposit Waiver",
              value: 2
            },
            {
              label: "thirdparty Deposit Waiver",
              value: 4
            },
            {
              label: "thirdparty WeChat Payment",
              value: 5
            }
          ]
        }
        // {
        //   type: "select", placeholder: "BatteryRentStatus", prop: "rentStatus", width: 180, options: [
        //     {
        //       label: "Not Returned",
        //       value: 0,
        //     },
        //     {
        //       label: "已Return",
        //       value: 1,
        //     },
        //     {
        //       label: "退款中",
        //       value: 2,
        //     },
        //     {
        //       label: "已退款",
        //       value: 3,
        //     },
        //   ],
        // },
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              orderNo: "",
              phone: "",
              status: null,
              payType: null
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        { label: "Username", prop: "nickName" },
        { label: "Phone", prop: "phone" },
        { label: "BatteryType", prop: "btType" },
        {
          label: "DepositMoney",
          prop: "money",
          formatter: e => (e.money ? "$" + e.money : "$0")
        },
        {
          label: "PaymentStatus",
          prop: "status",
          itemClass: e => (e.status == 0 ? "danger" : ""),
          formatter: e =>
            e.status == 0
              ? "Wait Payment"
              : e.status == 1
              ? "Already Payment"
              : "--"
        },
        {
          label: "DepositStatus",
          prop: "returnStatus",
          itemClass: e => (e.returnStatus == 1 ? "success" : ""),
          // formatter: e => (e.returnStatus == 0 ? '未退Deposit' : e.returnStatus == 1 ? '已退Deposit' : '--')
          formatter: e => (e.returnStatus == 1 ? "Refunded Deposit" : "--")
        },
        {
          label: "PaymentType",
          prop: "payType",
          formatter: e =>
            e.payType == 0
              ? "WeChat"
              : e.payType == 1
              ? "Alipay"
              : e.payType == 2
              ? "Alipay Deposit Waiver"
              : e.payType == 4
              ? "thirdparty Deposit Waiver"
              : e.payType == 5
              ? "thirdparty WeChat Payment"
              : "--"
        },
        // {
        //   label: "BatteryRentStatus", prop: "rentStatus",
        //   formatter: e => (e.rentStatus == 0 ? 'Not Returned' : e.rentStatus == 1 ? '已Return' : e.rentStatus == 2 ? '退款中' : e.rentStatus == 3 ? '已退款' : '--')
        // },
        { label: "Payment Time", prop: "payTime" },
        { label: "Start Time", prop: "ctime" }
      ],
      tableHandles: [
        {
          label: "Deposit OrderExport",
          type: "primary",
          icon: "el-icon-download",
          // titles:
          //   "可以根据Order Nnumber、Phone、PaymentStatus、PaymentType筛选出订单再Export，也可以不选，直接ExportWhole订单",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.depositOrderExport(this.searchData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 },
      totalList: {}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.pagination.offset,
          pageSize: this.pagination.limit
        }
      };
      var res = await this.apis.depositOrderList(parm);
      this.tableData = res.rows || [];
      this.totalList = res.params || {};
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 900px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.contentBatterydiv {
  width: 190px;
}

.contentBatterydiv:nth-child(1) {
  margin-left: 40px;
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
